import MainContainerCustom from '@/components/MainContainerCustom';
import { Button } from '@antmjs/vantui';
import { View } from '@tarojs/components';
import { CBlockCustom, CSpaceCustom } from '@vh-mobile/pro-components';

export default function DemoSpace() {
  return (
    <MainContainerCustom showTabbar tabbarActive="space">
      <View className="flex">
        <CBlockCustom title="基础用法" padding>
          <CSpaceCustom>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
          </CSpaceCustom>
        </CBlockCustom>
        <CBlockCustom title="垂直" padding>
          <CSpaceCustom direction="vertical" align="start">
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
          </CSpaceCustom>
        </CBlockCustom>
        <CBlockCustom title="间隙" padding>
          <CSpaceCustom size="large">
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
          </CSpaceCustom>
        </CBlockCustom>
        <CBlockCustom title="居中" padding>
          <CSpaceCustom justify="center">
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
          </CSpaceCustom>
        </CBlockCustom>
        <CBlockCustom title="不换行" padding>
          <CSpaceCustom wrap="nowrap">
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
            <Button type="primary">信息按钮</Button>
          </CSpaceCustom>
        </CBlockCustom>
        <CBlockCustom title="垂直" padding>
          <CSpaceCustom direction="vertical">
            <Button type="primary" block={true}>
              信息按钮
            </Button>
            <Button type="primary" block={true}>
              信息按钮
            </Button>
            <Button type="primary">信息按钮</Button>
            <View>信息信息信息信息信息信息信息信息信息信息信息信息</View>
          </CSpaceCustom>
        </CBlockCustom>
      </View>
    </MainContainerCustom>
  );
}
